<template>
  <van-nav-bar class="nav-bar" :title="props.title">
    <template #left>
      <van-icon v-if="backShow()" class="m-r-10" @click="back" name="arrow-left" size="18" />
      <!-- <van-icon @click="close" name="cross" size="18" /> -->
    </template>
    <template #right>
      <!-- <van-icon @click="more" name="ellipsis" size="18" /> -->
    </template>
  </van-nav-bar>
</template>

<script lang="ts" setup>
import { ref, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const props = defineProps({
  title: String
})

// 不显示返回按钮列表
const hiddenLists = ref(['/index/total-preview', '/index/data-preview', '/index/todo', '/workbench', '/user'])

const backShow = () => {
  const idx = hiddenLists.value.indexOf(route.path)
  return idx === -1
}

// const { title } = toRefs(props);
// 返回
const back = () => {
  if(route.path === '/orderTask'){
    localStorage.removeItem('model')
  }
  router.back();
};
// 关闭
const close = () => {
  console.log('关闭');
};
// 更多
const more = () => {
  console.log('更多');
};



onMounted(() => {
  // console.log('route', route.path)
})
</script>
<style lang="scss" scoped>
.nav-bar {
  background-color: $primary-color; // transparent

  &:deep(.van-nav-bar__content) {
    .van-nav-bar__left {}

    .van-nav-bar__title {
      color: #fff;
    }

    .van-nav-bar__right {}

    .van-icon {
      color: #fff;
    }
  }
}

.m-r-10 {
  margin-right: 10px;
}
</style>